<template>
  <cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
    <cl-pagefull>
      <template #head>
        <el-row type="flex">
          <cl-filter-group v-model="search">
            <cl-filter label="事业部">
							<cl-select v-model="search.biz_id" placeholder="请选择" filterable @change="changeBiz">
								<el-option v-for="item in business" :key="item.biz_id" :label="item.biz_name" :value="item.biz_id" />
							</cl-select>
						</cl-filter>
            <cl-filter label="门店">
              <cl-shop-select v-model="search.dept_id" clearable filterable :biz_id="search.biz_id" style="width: 100%" />
            </cl-filter>
          </cl-filter-group>

        </el-row>
        <el-row>
          <el-button type="primary" @click="addMethods('add')">新增</el-button>
        </el-row>
      </template>
      <el-row>
        <cl-table v-bind="tableProp">
          <template #column-opt="{ scope: { row } }">
            <el-button type="primary" @click="addMethods('edit', row)">编辑</el-button>
          </template>

        </cl-table></el-row>
      <template slot="foot">
        <el-row type="flex">
          <cl-flex1 />
          <!-- 分页控件 -->
          <cl-pagination />
        </el-row>
      </template>
    </cl-pagefull>
    <EditMethodDiaog ref="editMethodDiaogRef" @successed="refresh" />
  </cl-crud>
</template>

<script>
import pageMinix from "@/mixins/page";
import EditMethodDiaog from './components/editDialog'
export default {
  components: {
    EditMethodDiaog
  },
  mixins: [pageMinix],
  data() {
    return {
      search: { 
        hasPage: true,
        biz_id: "",
				dept_id: ""
      },
      tableProp: {
        columns: [
          {
            label: "门店名称",
            prop: "dept_name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "分成名称",
            prop: "name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },

          {
            label: "备注",
            prop: "remark",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          }, { label: "操作", prop: "opt", width: 100, fixed: "right", disable: true }
        ]
      }
    };
  },
  created() {
    this.search.biz_id = this.getCurrBiz();
    this.getBizRefShop(this.search.biz_id);
  },
  mounted() { },
  methods: {
    onLoad({ ctx, app }) {
      ctx.service(this.$service.reconciliation)
        .set("dict", {
          api: {
            page: "deptAllocationPlanList"
          }
        })
        .done();
      app.refresh(this.search);
    },
    async onRefresh(params, { next, render }) {


      const { list } = await next(params)
      console.log(list);

      render(list);
    },
    addMethods(type, row) {
      this.$refs.editMethodDiaogRef.open(type, row);

    },
    refresh() {
      this.$refs.crud.refresh({ page: 1, ...this.search })
    },
  }
};
</script>
<style scoped lang="scss"></style>
